<template>
	<view class="login">
		<view class="login_header">
			<!-- <image src="https://www.6dbx.com/static/ydImg/ydlogo.png" mode=""></image> -->
			<image src="../../static/img/loginClose.png" mode="" @click="cancelLogin"></image>
		</view>
		<view class="login_tab">
			<view class="login_tab_box">
				<view class="login_tab_boxItem" :class="activeTab == 0?'activeTab':''" @click="changeTab(0)">
					验证码登录
				</view>
				<view class="login_tab_boxItem" :class="activeTab == 1?'activeTab':''" @click="changeTab(1)">
					密码登录
				</view>
			</view>
		</view>
		<view class="login_form" v-if="activeTab == 0">
			<view class="login_formItem">
				<view class="login_formItem_left">
					<image src="../../static/img/loginPhone.png" mode=""></image>
					<u--input placeholder="请输入手机号码" border="none" v-model="mobile"></u--input>
				</view>
			</view>
			<view class="login_formItem">
				<view class="login_formItem_left">
					<image src="../../static/img/loginPass.png" mode=""></image>
					<u--input placeholder="验证码" border="none" v-model="yzm"></u--input>
				</view>
				<view class="login_formItem_right">
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
					<view class="getCode" @tap="getCode">
						{{tips}}
					</view>
				</view>
			</view>
		</view>
		<view class="login_form" v-if="activeTab == 1">
			<view class="login_formItem">
				<view class="login_formItem_left">
					<image src="../../static/img/loginUser.png" mode=""></image>
					<u--input placeholder="请输入用户名或手机号码" border="none" v-model="account"
						:customStyle="{width:'400rpx'}"></u--input>
				</view>
			</view>
			<view class="login_formItem">
				<view class="login_formItem_left">
					<image src="../../static/img/loginLock.png" mode=""></image>
					<u--input placeholder="请输入密码" border="none" v-model="password" type="password"></u--input>
				</view>
			</view>
		</view>
		<view class="login_btn" @click="goLogin">
			{{loginBtnText}}
		</view>
		<view class="login_opa">
			<view class="login_opa_left" @click="goRegister">
				立即注册
			</view>
			<view class="login_opa_right" @click="goForget">
				忘记密码
			</view>
		</view>
		<view class="login_fg">
			<u-divider text="其他登录方式" textColor="#333333" lineColor="#A9B1BE"></u-divider>
		</view>
		<view class="login_box">
			<image src="../../static/img/wxLogin.png" mode=""></image>
		</view>
		<view class="login_footer">
			<u-checkbox-group v-model="agree">
				<u-checkbox :customStyle="{marginRight: '10rpx'}" shape="circle" activeColor="#3897F9"></u-checkbox>
			</u-checkbox-group>
			<span>同意<span class="login_xy">《用户协议》</span>和<span class="login_xy">《隐私协议》</span></span>
		</view>
	</view>
</template>

<script>
	import {
		getVCode,
		getVCodeLogin,
		getAccountLogin,
		getUserInfo
	} from '@/api/index.js'
	import {
		getUid,
		getUcode,
	} from '@/utils/tools.js'
	export default {
		data() {
			return {
				activeTab: 0,
				mobile: '',
				yzm: '',
				tips: '',
				seconds: 60,
				loginBtnText: '登录',
				account: '',
				password: '',
				agree: [],
				phoneNumberPattern: /^1[3-9]\d{9}$/
			}
		},
		methods: {
			cancelLogin(){
				let  pages = getCurrentPages();
				// console.log(pages);
				let prePage = pages[pages.length-2].$page.fullPath
				// console.log(prePage);
				if(prePage == '/pages/mine/mine'){
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateBack()
				}
			},
			goForget(){
				uni.navigateTo({
					url:'/pages/forget/forget'
				})
			},
			goRegister(){
				uni.navigateTo({
					url:'/pages/register/register'
				})
			},
			changeTab(num) {
				this.activeTab = num
				this.mobile = ''
				this.yzm = ''
				this.account = ''
				this.password = ''
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (this.mobile == '') {
						return uni.showToast({
							icon: 'none',
							title: '请输入手机号'
						})
					}
					if (!this.phoneNumberPattern.test(this.mobile)) {
						return uni.showToast({
							icon: 'none',
							title: '请输入正确的手机号'
						})
					}
					uni.showLoading({
						title: '正在获取验证码'
					})
					const res = await getVCode({
						mobile: this.mobile
					})
					// console.log(res);
					uni.hideLoading();
					uni.$u.toast('验证码已发送');
					this.$refs.uCode.start();
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			async goLogin() {
				if (this.activeTab == 0) { //验证码登录
					if (this.mobile == '') {
						return uni.showToast({
							icon: 'none',
							title: '请输入手机号'
						})
					}
					if (this.yzm == '') {
						return uni.showToast({
							icon: 'none',
							title: '请输入验证码'
						})
					}
					if (this.agree.length == 0) {
						return uni.showToast({
							icon: 'none',
							title: '点击勾选同意下方协议'
						})
					}
					const res = await getVCodeLogin({
						account: this.mobile,
						yzm: this.yzm
					})
					uni.setStorageSync('uid', res.data.uid)
					uni.setStorageSync('code', res.data.code)
					const ures = await getUserInfo({
						uid:res.data.uid,
						ucode:res.data.code
					})
					uni.setStorageSync('userInfo', ures.data)
					uni.showToast({
						icon: 'none',
						title: '登录成功'
					})
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/mine/mine'
						})
					},1000)
				} else {
					if (this.account == '') {
						return uni.showToast({
							icon: 'none',
							title: '请输入手机号或账号'
						})
					}
					if (this.password == '') {
						return uni.showToast({
							icon: 'none',
							title: '请输入密码'
						})
					}
					if (this.agree.length == 0) {
						return uni.showToast({
							icon: 'none',
							title: '点击勾选同意下方协议'
						})
					}
					const res = await getAccountLogin({
						account: this.account,
						userpwd: this.password
					})
					uni.setStorageSync('uid', res.data.uid)
					uni.setStorageSync('code', res.data.code)
					const ures = await getUserInfo({
						uid:res.data.uid,
						ucode:res.data.code
					})
					uni.setStorageSync('userInfo', ures.data)
					uni.showToast({
						icon: 'none',
						title: '登录成功'
					})
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/mine/mine'
						})
					},1000)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.login {
		min-height: 100vh;

		.login_header {
			height: 480rpx;
			background-image: url('https://www.6dbx.com/static/ydImg/bgbgbg.png');
			background-size: cover;
			position: relative;

			image {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				left: 30rpx;
				top: 108rpx;
			}
		}

		.login_tab {
			padding: 80rpx 0 22rpx 0;
			display: flex;
			justify-content: center;

			.login_tab_box {
				display: flex;
				border-radius: 16rpx;
				border: 1rpx solid #F43107;
				overflow: hidden;

				.login_tab_boxItem {
					width: 240rpx;
					height: 72rpx;
					text-align: center;
					line-height: 72rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #F43107;
				}

				.activeTab {
					color: #fff;
					background-color: #F43107;
				}
			}
		}

		.login_form {
			padding: 0 94rpx;

			.login_formItem {
				height: 140rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #A9B1BE;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				.login_formItem_left {
					display: flex;
					align-items: center;

					image {
						width: 28rpx;
						height: 32rpx;
						margin-right: 20rpx;
					}
				}

				.login_formItem_right {
					.getCode {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #3897F9;
					}
				}
			}
		}

		.login_btn {
			width: 560rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #F43107 0%, #FF9289 50%, #F43107 100%);
			border-radius: 100rpx;
			margin: 0 auto;
			margin-top: 98rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}

		.login_opa {
			width: 560rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #3897F9;
			margin: 0 auto;
			margin-top: 20rpx;
		}

		.login_fg {
			width: 560rpx;
			margin: 0 auto;
			margin-top: 40rpx;
		}

		.login_box {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40rpx;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.login_footer {
			margin-top: 136rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #ACACAC;

			.login_xy {
				color: #3897F9;
			}
		}
	}
</style>